<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="description" content="此代码内容为超萌的猫头鹰登录界面"/>
    <title>超萌的猫头鹰登录界面</title>

    <link rel="stylesheet" href="../static/assets/css/jq22.css" type="text/css" th:href="@{/assets/css/jq22.css}"/>
    <link rel="stylesheet" href="../static/assets/css/font-awesome.min.css" type="text/css"
          th:href="@{/assets/css/font-awesome.min.css}"/>
    <script src="../static/assets/js/jquery-1.10.2.min.js"
            th:src="@{/assets/js/jquery-1.10.2.min.js}"> type = "text/javascript"</script>
    <script src="../static/assets/js/bootstrap.min.js"
            th:src="@{/assets/js/bootstrap.min.js}"> type = "text/javascript"</script>
    <script src="../static/assets/js/jquery.messager.js"
            th:src="@{/assets/js/jquery.messager.js}"> type = "text/javascript"</script>
    <script src="../static/assets/js/md5.js" th:src="@{/assets/js/md5.js}"> type = "text/javascript"</script>
    <script type="text/javascript">
        $(function () {
            $('#login #password').focus(function () {
                $('#owl-login').addClass('password');
            }).blur(function () {
                $('#owl-login').removeClass('password');
            });
            //简单登录操作
            $("#doLogin").click(function (e) {
                $.ajax({
                    type: "POST",
                    url: "/login",
                    contentType: "application/json",
                    data: JSON.stringify({
                        "username": $("#username").val(),
                        "password": hex_md5($("#password").val())
                    }),
                    dataType: "json",
                    success: function (data) {
                        switch (data.result.toString()) {
                            case "1":
                                window.location.href = "/index";
                                break;
                            case "2":
                                $.messager.alert("提示", '密码错误');
                                break;
                            case "3":
                                $.messager.alert("提示", '账号未注册');
                                break;
                            case "0":
                                $.messager.alert("提示", '账号密码不能为空！');
                                break;

                        }
                    }
                });
            });
        });
    </script>
    <script>
        $(function () {
            $("#register").click(function () {
// 处理表单验证和交给后台处理的逻辑
                var oError = document.getElementById("error_box");
                var username = $("#username1").val();
                var password = hex_md5($("#password1").val());
                var mail = $("#mail").val();
                var isNotError = true;
                if (username == "") {
                    oError.innerHTML = "账号为空 ";
                    isNotError = false;
                    $("#username1").focus();
                    return;
                }
                if (password == "") {
                    oError.innerHTML = "密码为空 ";
                    isNotError = false;
                    $("#password1").focus();
                    return;
                }
                if (mail == "") {
                    oError.innerHTML = "邮箱为空 ";
                    isNotError = false;
                    $("#mail").focus();
                    return;
                }
                $.ajax({
                    type: "POST",
                    url:  "register",
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify({
                        username: username,
                        password: password,
                        mail: mail
                    }),
                    success: function (data) {
                        // if (data.result == "1") {
                        //     window.location.href =+"index";
                        // }
                        // if{
                        //
                        // }
                        // else {
                        //     $.messager.alert("提示",'账号密码不能为空！');
                        // }
                        switch (data.result.toString()) {
                            case "1": {
                                $(".modal").css("display", "none");
                                $(".modal-backdrop").css("display", "none");
                                $.messager.alert("提示", '注册成功请登录');
                                break;
                            }
                                ;
                            case "2": {
                                $.messager.alert("提示", '账号已存在');
                                break;
                            }
                            case "0": {
                                $.messager.alert("提示", '账号密码不能为空！');
                                break;
                            }

                        }
                    }
                });

            });

        });
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: Arial, helvetica, "Microsoft Yahei", sans-serif;;
            font-size: 16px;
        }

        body {
            overflow: hidden;
        / / 隐藏滚动条
        }

        h1 {
            color: #fff;
            font-size: 35px;
            font-weight: bold;
            margin: 80px auto 50px -25px;
            text-align: center;
            text-shadow: 0 1px 1px #555;
        }

        .box {
            width: 390px;
            height: 320px;

            border: solid 1px #ddd;
            border-radius: 5px;
            background: #FFF;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -195px;
            margin-top: -160px; /*注意处理浏览器圆角的兼容  */
            -webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .3);
            box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .3);
        }

        .box h2 {
            font-weight: normal;
            color: #666;
            font-size: 16px;
            line-height: 46px;
            height: 46px;
            overflow: hidden;
            text-align: center;
            border-bottom: solid 1px #ddd;
            background: #f7f7f7;
        }

        .input_box {
            width: 350px;
            padding-bottom: 15px;
            margin: 0 auto;
            overflow: hidden;
        }

        .input_box input {
            float: left;
            width: 348px;
            height: 40px;
            font-size: 14px;
            border: solid 1px #ddd;
            border-radius: 5px;
            text-indent: 10px;
            outline: none;
            line-height: 40px;
        }

        .input_box button {
            width: 350px;
            height: 48px;
            background: #008386;
            border: none;
            border-radius: 5px;
            outline: none;
            cursor: pointer;
            font-size: 16px;
            color: #FFF;
        }

        #error_box {
            height: 40px;
            width: 350px;
            margin: 0 auto;
            line-height: 40px;
            color: #fc4343;
        }
    </style>
</head>
<body>
<!-- begin -->
<div id="login">
    <div class="wrapper">
        <div class="login">
            <form action="#" method="post" class="container offset1 loginform">
                <div id="owl-login">
                    <div class="hand"></div>
                    <div class="hand hand-r"></div>
                    <div class="arms">
                        <div class="arm"></div>
                        <div class="arm arm-r"></div>
                    </div>
                </div>
                <div class="pad">
                    <input type="hidden" name="_csrf" value="9IAtUxV2CatyxHiK2LxzOsT6wtBE6h8BpzOmk="/>
                    <div class="control-group">
                        <div class="controls">
                            <label for="username" class="control-label"><i class="fa fa-user"
                                                                           aria-hidden="true"></i></label>
                            <input id="username" type="text" name="username" placeholder="账号" tabindex="1"
                                   autofocus="autofocus" class="form-control input-medium"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="controls">
                            <label for="password" class="control-label"><i class="fa fa-key"
                                                                           aria-hidden="true"></i></label>
                            <input id="password" type="password" name="password" placeholder="密码" tabindex="2"
                                   class="form-control input-medium"/>
                        </div>
                    </div>
                </div>
                <div class="form-actions"><a href="#" tabindex="5" class="btn pull-left btn-link text-muted">Forgot
                    password?</a>
                    <button type="button" id="doLogin" tabindex="4" class="btn btn-primary">登入</button>
                    <button type="button" tabindex="4" class="btn btn-primary" data-toggle="modal"
                            data-target="#myModal">注册
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- end -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    注册

                </h4>
            </div>
            <div class="modal-body">
                <div class="input_box">
                    <input type="text" placeholder="请输入账号" id="username1" name="username1"/><br/>
                </div>
                <div class="input_box">
                    <input type="text" placeholder="请输入密码" id="password1" name="password1"/><br/>
                </div>
                <div class="input_box">
                    <input type="text" placeholder="请输入邮箱" id="mail" name="mail"/><br/>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="register">
                    注册
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</body>
</html>